<template>
  <div class="kv">
    <Nav :navs="navs" cur-page="首页"></Nav>
    <div class="kv-swiper" v-if="kv && kv.length > 0" v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in kv" :key="index"><img :src="item" alt=""></div>
      </div>
      <div class="kv-pagination"></div>
    </div>
    <button class="theme-gradient-row theme-kv">了解更多</button>
    <div class="kv-index">
      <Icon type="doubleleft" class="left"/>
      <span class="cur">{{`0${curIndex+1}`}}</span>/<span class="total">{{`0${kv.length}`}}</span>
      <Icon type="doubleright" class="right"/>
    </div>
    <div class="copyright theme-kv"></div>
  </div>
</template>

<script>
  import Nav from '../../components/Nav';
  import Icon from '../../components/Icon';
  import themeStyleSheet from '../../assets/theme';

  export default {
    async asyncData(context) {
      // 获取路由中的参数 route 为vueRouter 对象
      // let id = context.route.query.id;

      // ssr阶段获取数据  代理的配置在此处无用
      // let {data} = await context.$axios.get('https://evp.51job.com/51job/api/51microadmin/back.php?action=companyone&id=' + id);

      return {
        myid: context.route.query.myid || '失败',
        // company: data ? data.content.slice(0, 4) : '失败',    // 模板中若引用此数据，则在ssr阶段会渲染到页面中，SEO关键点！
        themeColor1: '#56CCF2',
        themeColor2: '#2F80ED',
        kv: ['/kv/index_bg1.jpg', '/kv/index_bg2.jpg', '/kv/index_bg3.jpg'],
        // navs: ['首页', '关于我们', '薪资福利', '招聘流程', '招聘职位',],
        navs: [
          {
            en: 'main',
            zh: '首页',
            modules: [
              {
                en: 'kv',
                zh: '首页',
                data: '{abc: 123}'
              },
            ]
          },
          {
            en: 'about_us',
            zh: '关于我们',
            modules: [
              {
                en: 'Development History',
                zh: '公司简介',
                data: '{abc: 123}'
              },
              {
                en: 'Development History',
                zh: '发展历程',
                data: '{abc: 123}'
              },
              {
                en: 'Product',
                zh: '产品与服务',
                data: '{abc: 123}'
              },
              {
                en: 'Enterprise Honor',
                zh: '企业荣誉',
                data: '{abc: 123}'
              },
              {
                en: 'Employees Story',
                zh: '员工故事',
                data: '{abc: 123}'
              },
            ]
          },
          {
            en: 'benefit',
            zh: '薪资福利',
            modules: [
              {
                en: 'Compensation & Benefits',
                zh: '薪资福利',
                data: '{abc: 123}'
              },
              {
                en: 'Working Environment',
                zh: '工作环境',
                data: '{abc: 123}'
              },
              {
                en: 'Employee Benefit',
                zh: '员工福利',
                data: '{abc: 123}'
              },
            ]
          },
          {
            en: 'process',
            zh: '招聘流程',
            modules: [
              {
                en: 'Recruitment Process',
                zh: '招聘流程',
                data: '{abc: 123}'
              },
              {
                en: 'Campus Roadshows',
                zh: '宣讲行程',
                data: '{abc: 123}'
              },
              {
                en: 'Q & A',
                zh: '常见问题',
                data: '{abc: 123}'
              },
            ]
          },
          {
            en: 'job',
            zh: '招聘职位',
            modules: [
              {
                en: 'Join Us',
                zh: '招聘职位',
                data: '{abc: 123}'
              },
            ]
          },
        ]
      };
    },
    data() {
      const _this = this;
      return {
        curIndex: 0,
        swiperOption: {
          autoplay: true,
          direction: 'vertical',
          pagination: {
            el: '.kv-pagination',
            bulletClass: 'kv-bullet',
            bulletActiveClass: 'kv-bullet-active',
          },
          on: {
            slideChangeTransitionEnd: function () {
              _this.curIndex = this.activeIndex;
            },
          }
        },
        swiper: null
      };
    },
    head() {
      return {
        style: [
          {
            cssText: themeStyleSheet({
              themeColor1: this.themeColor1,
              themeColor2: this.themeColor2,
              themeColorKv: '#fff',
              themeColorSelect: this.themeColor1
            }), type: 'text/css'
          }
        ]
      };
    },
    components: {
      Nav, Icon
    }
  };
</script>

<style lang="scss">
  @import "../../assets/mixins";
  .kv {width: 100%;max-height: 100vh;overflow: hidden;position: relative;
    > nav {position: absolute;right: 90px;top: 0;white-space: nowrap;z-index: 10;}
    .kv-swiper {z-index: 0;height: 56.25vw;max-height: 100vh;overflow: hidden;
      img {width: 100%}
      .kv-pagination {height: 200px;width: 14px;position: absolute;@include abs-col-center();right: 2.92%;
        z-index: 10;transform: none !important;display: flex;flex-direction: column;justify-content: center;
        .kv-bullet {margin: 10px 0;display: block;width: 14px;height: 14px;border-radius: 50%;border: 1px solid;}
      }
    }
    > button {width: 200px;height: 72px;font-size: 24px;position: absolute;
      top: 60%;left: 5.1%;z-index: 5;cursor: pointer;@include gradient-shadow()
    }
    .kv-index {position: absolute;right: 56px;bottom: 33px;color: #fff;
      .left {margin-right: 48px; width: 16px;vertical-align: bottom;transform: translateY(-2px)}
      .right {margin-left: 48px; width: 16px;vertical-align: bottom;transform: translateY(-2px)}
      .cur {font-size: 30px;font-weight: bold;vertical-align: bottom;margin-right:12px;}
      .total {font-size: 16px;vertical-align: bottom;margin-left:12px;}
    }
    .copyright {position: absolute;left: 5.1%;bottom: 40px;z-index: 2;font-size: 14px;}
  }
</style>
